<template>
  <div class="home">
    <!-- 轮播图 -->
    <div class="swiper">
      <van-swipe :autoplay="3000">
        <van-swipe-item
          v-for="(image, index) in images"
          :key="index"
          class="img-item"
        >
          <img :src="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 选项 -->
    <div class="options">
      <div class="option-item" v-for="option in options" :key="option.title">
        <div
          class="item"
          :style="{ 'background-image': 'url(' + option.icon + ')' }"
          @click="goPage(option.path)"
        >
          {{ option.title }}
        </div>
      </div>
      <!-- <div class="option-item"><div class="item">挂号预约</div></div>
      <div class="option-item"><div class="item">地图导航</div></div>
      <div class="option-item"><div class="item">药房</div></div>
      <div class="option-item"><div class="item">病情概览</div></div>
      <div class="option-item"><div class="item">我的医生</div></div> -->
    </div>
    <hr />
    <!-- 资讯列表-->
    <div class="list">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
        <van-row>
          <van-col span="1"></van-col>
          <van-col span="8"><span>最新资讯</span></van-col>
        </van-row>
        <div class="list-item">
          <van-row
            v-for="newsItem in newsItems"
            :key="newsItem.title"
            @click="goPage('/news')"
          >
            <van-col span="2"></van-col>
            <van-col span="2">
              <div class="img-list">
                <img :src="newsItem.img" alt="" />
              </div>
            </van-col>
            <van-col span="16">
              <span>{{ newsItem.title }}</span>
              <hr />
            </van-col>
            <van-col span="2"> </van-col>
          </van-row>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
export default {
  name: 'List',
  components: {},
  data() {
    return {
      images: [
        'https://th.bing.com/th?id=OIP.tmvIu57hTRpXhPRWkBDDEQHaEK&w=333&h=187&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
        'https://th.bing.com/th?id=OIP.jSjEpsSIymcWqEREuvkc_QHaEK&w=333&h=187&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2'
      ],
      list: [],
      loading: false,
      finished: false,
      options: [
        { title: '贡献', icon: require('../images/1.png') },
        { title: '挂号预约', icon: require('../images/2.png') },
        { title: '地图导航', icon: require('../images/3.png') },
        { title: '药房', icon: require('../images/4.png') },
        { title: '病情概览', icon: require('../images/5.png') ,path:'/sickstate'},
        { title: '我的医生', icon: require('../images/6.png') }
      ],
      newsItems: [
        { img: require('../images/1.png'), title: '癫痫大发作。急救时......' },
        { img: require('../images/2.png'), title: '癫痫多样的表现症状' },
        { img: require('../images/3.png'), title: '癫痫大发作。急救时......7' },
        { img: require('../images/1.png'), title: '癫痫大发作。急救时......9' },
        { img: require('../images/2.png'), title: '癫痫多样的表现症状6' }
        // { img: require('../images/3.png'), title: '癫痫大发作。急救时......' },

        // {img:'',title:''},
        // {img:'',title:''},
      ],
      a: require('../images/1.png')
    }
  },
  methods: {
    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1)
        }
        // 加载状态结束
        this.loading = false

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true
        }
      }, 500)
    },
    goPage(target) {
      this.$router.push(target)
    }
  }
}
</script>

<style scoped>
.swiper {
  /* width: 90%;
  margin:5%; */
}
.img-item {
  /* width: 300px; */
  height: 180px;
}
/* .item::after{
    content: "1";
} */
img {
  width: 100%;
  height: 100%;
}
.options {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 20px;
}
.option-item {
  /* border: 1px solid black; */
  width: 33.33%;
  margin-bottom: 20px;
}
.item {
  width: 50px;
  height: 50px;
  margin: 5px auto;
  font-size: 10px;
  text-align: center;
  line-height: 130px;
  border-radius: 50%;
  /* background-color: red; */
  /* background-image: url('../images/1.png'); */
  background-size: cover;
}
.list {
  height: 255px;
  overflow: auto;
  /* background-color: red; */
}
.list-item {
  /* text-overflow: ellipsis; */
  /* height: 250px; */
  /* overflow: auto; */
}
.list,
.list-item {
  margin-top: 10px;
  /* background-color: red; */
}
.img-list {
  width: 20px;
  height: 20px;
  /* background: url('../images/1.png'); */
  background-size: cover;
}
</style>